<template>
    <section class="base-list custom-input">
        <el-row class="search" @keyup.enter.native="enterSearch">
            <slot name="search"></slot>
            <div v-if="showLine" class="border-line"></div>
        </el-row>

        <el-row class="operbar" v-if="isShowOper">
            <slot name="operbar"></slot>
        </el-row>
        <el-row class="status">
            <slot name="status"></slot>
        </el-row>
        <el-row class="content" v-loading="listLoading" :element-loading-text="loadText">
            <slot name="list"></slot>
        </el-row>

        <el-row class="bottom" type="flex" v-if="isPaging">
            <div class="oper">
                <slot name="oper"></slot>
            </div>
            <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr"
                           :page-size="pageInfo.iDisplayLength" :total="total">
            </el-pagination>
        </el-row>
    </section>
</template>

<script>
    export default {
        name: 'base-list',
        props: {
            // 分页条件
            condition: {
                type: Object,
                default: () => {
                }
            },
            // 分页方法
            pageSearch: {
                type: Function,
                require: true
            },
            // 列表数据集
            datas: {
                type: Array,
                require: true
            },
            // 列表加载文本
            loadText: {
                type: String,
                default: () => '列表加载中...'
            },
            // 是否分页
            isPaging: {
                type: Boolean,
                default: () => true
            },
            // 分页控制
            configPage: {
                type: Object,
                default: function () {
                    return this.$defalutPage()
                }
            },
            isShowClose:{
                type:Boolean,
                default: () => false
            },
            jobTime:{
                type:Boolean,
                default:false
            },
            showLine:{
                type:Boolean,
                default:true,
            },
            noSort:{
                type:Boolean,
                default:false
            }
        },
        computed: {
            isShowOper: function () {
                return Boolean(this.$slots.operbar)
            }
        },
        data() {
            return {
                listLoading: false, // 列表加载状态
                commonVisible: false,
                total: 0,
                pageInfo: this.configPage
            }
        },
        // mounted() {
        //     window.addEventListener('storage', (val) => {
        //         let key = val.key
        //         let msg = JSON.parse(val.newValue)
        //         if (key === 'message' && msg === 'loadData') {
        //             this.loadData()
        //         }
        //     })
        // },
        // keep-alive刷新
        activated(){
            // this.loadData()
        },
        methods: {
            loadData() {
                return new Promise((resolve, reject) => {
                    let params = this.$assist.copySearchConditions(this.condition) // 获取搜索条件不为空的拷贝
                    /** 拼接分页条件 */
                    // params.iDisplayStart = (this.pageInfo.pageStart - 1) * this.pageInfo.iDisplayLength
                    params.iDisplayStart = this.pageInfo.pageStart - 1
                    params.iDisplayLength = this.isPaging ? this.pageInfo.iDisplayLength : 99999999 // 判断是否对列表分页
                    if(!this.noSort){
                        params.sortType = '-createDateTime'
                    }
                    if(this.jobTime){
                        params.sortType = '-jobTime'
                    }
                    this.listLoading = true // 设置为加载状态
                    this.pageSearch(params).then(reponse => {
                        // 调用的组件使用了 promise,则不使用以下 $emit事件
                        this.$emit('update:datas', reponse.data.aaData)
                        // 手动触发slot 相关的事件
                        this.$emit('load', reponse.data.aaData)
                        this.total = reponse.data.iTotalRecords
                        this.listLoading = false // 取消加载状态
                        resolve(reponse.data)
                    }).catch(() => {
                        this.listLoading = false // 取消加载状态
                        reject()
                    })
                })
            },
            enterSearch() {
                this.loadData()
            },
        },
        watch: {
            pageInfo: {
                deep: true,
                handler: function () {
                    this.loadData()
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .base-list {
        width: 100%;
        .search {
            padding-top: 10px;
            margin-bottom: 0px;
            .border-line {
                margin-top: 8px;
                border-bottom: 1px dashed #ddd;
            }
        }
        .bottom {
            display: flex;
            padding: 0 10px;
            justify-content: space-between;
            align-items: center;
        }
        .operbar {
            padding-top: 10px;
            display: flex;
            justify-content: flex-end;
        }
        .content {
            padding: 0 0 15px 0;
        }
        &.alone-row {
            .border-line {
                margin-top: 8px;
            }
        }
        .status {
            padding: 10px 10px 10px 0;
        }
    }
</style>
